<template>
  <div class="expressDelivery-item">
    <div class="expressDelivery-head">
      <h3>收方信息</h3>
      <div class="btn" v-if="isEdit">
        <el-link icon="Location" type="primary" @click="() => {
          pup.state = true
          getAddresss()
        }">地址管理</el-link>
      </div>
    </div>
    <div class="expressDelivery-main">
      <dl>
        <dt>公司名称</dt>
        <dd>
          {{ data.receiveCompanyName || '--' }}
        </dd>
      </dl>
      <dl>
        <dt>收方信息</dt>
        <dd class="list-r-8">
          <span>{{ data.receiverName || '--' }}</span>
          <span>{{ data.receiveTelephone || '--' }}</span>
        </dd>
      </dl>
      <dl>
        <dt>详细地址</dt>
        <dd>
          {{ data.receiveAddress || '--' }}
        </dd>
      </dl>
    </div>
    <SelectCom :pup="pup" :table="pup.table" :isShowBtn="true" @selectBtn="selectBtn" @searchBtn="getAddresss">
      <template #search="{ search }">
        <ElFormItemBox label="姓名" prop="contactPersonName">
          <ElInputBox :data="search" dataName="contactPersonName" />
        </ElFormItemBox>
        <ElFormItemBox label="电话" prop="contactTelephone">
          <ElInputBox :data="search" dataName="contactTelephone" />
        </ElFormItemBox>
        <ElFormItemBox label="详细地址" prop="detailedAddress">
          <ElInputBox :data="search" dataName="detailedAddress" />
        </ElFormItemBox>
      </template>
      <template #headR>
        <el-button type="primary" icon="Plus" @click="pupAdd.state = true">新建</el-button>
      </template>
      <template #select_contactPersonName="{ row }">
        <div class="list-r-8">
          <span>{{ row.contactPersonName }}</span>
          <el-tag type="success" effect="dark" v-if="row.isDefaultReceive === 1">默认</el-tag>
        </div>
      </template>
      <template #select_operationBtn="{ row }">
        <div class="list-r-8">
          <el-link type="primary" @click="() => {
            pupAdd.state = true
            pupAdd.form = JSON.parse(JSON.stringify(row))
          }">编辑</el-link>
          <el-link type="primary" @click="() => {
            proxy.$api.OrderBusniess.DeleteReceiveAddress({
              receiveAddressID: row.receiveAddressID
            })
              .then((res: any) => {
                proxy.$message('删除成功');
                getAddresss()
              }).catch(() => {
              })
          }">删除</el-link>
        </div>
      </template>
    </SelectCom>
    <ElPupFormBox :pup="pupAdd">
      <template #default="{ form }">
        <ElFormItemBox label="公司名称" prop="companyName">
          <ElInputBox :data="form" dataName="companyName" />
        </ElFormItemBox>
        <ElFormItemBox label="姓名" prop="contactPersonName" isRules>
          <ElInputBox :data="form" dataName="contactPersonName" />
        </ElFormItemBox>
        <ElFormItemBox label="电话" prop="contactTelephone" isRules rulesType="phone">
          <ElInputBox :data="form" dataName="contactTelephone" />
        </ElFormItemBox>
        <ElFormItemBox label="详细地址" prop="detailedAddress" isRules>
          <ElInputBox :data="form" dataName="detailedAddress" placeholder="详细地址" type="textarea" />
        </ElFormItemBox>
        <ElFormItemBox label="默认地址" prop="isDefaultReceive">
          <ElSwitchBox :data="form" dataName="isDefaultReceive" :inactive-value="0" :active-value="1" />
        </ElFormItemBox>
      </template>
    </ElPupFormBox>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    isEdit?: any;
  }>(),
  {

  },
);
watch(() => props.data?.customerCode, (newVal, oldVal) => {
  nextTick(() => {
    getAddresss()
  })
});
const pup: any = reactive({
  state: false,
  typeName: 0,
  title: `收方地址`,
  number: 0,
  table: {
    rowKey: 'receiveAddressCode',
    title: '收方地址列表',
    search: {
      contactPersonName: '',
      contactTelephone: '',
      detailedAddress: '',
    },
    tbody: [],
    thead: [
      {
        label: '公司名称',
        prop: 'companyName',
        align: 'left',
        width: 320,
      },
      {
        label: '姓名',
        prop: 'contactPersonName',
        align: 'left',
        width: 160,
      },
      {
        label: '电话',
        prop: 'contactTelephone',
        align: 'center',
        width: 180,
      },
      {
        label: '详细地址',
        prop: 'detailedAddress',
        align: 'left',
        width: null,
      },
      {
        label: '操作',
        prop: 'operationBtn',
        align: 'center',
        width: 100,
      },
    ],
  }
});
const pupAdd: any = reactive({
  state: false,
  typeName: 0,
  title: `编辑地址`,
  width: 600,
  height: 'auto',
  form: {
    receiveAddressID: 0, // 收货地址主键ID
    customerCode: "", // 客户代码
    contactPersonName: "", // 联系人姓名
    companyName: "", // 公司名称
    contactPersonSex: 0, // 联系人性别：1男；2女
    contactTelephone: "", // 联系人电话
    province: "", // 所在省代码
    city: "", // 所在市代码
    country: "", // 所在县代码
    detailedAddress: "", // 详细收货地址
    isDefaultReceive: 0 // 是否默认收货地址：1是；0否
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        pup.loading = true
        if (pup.form.receiveAddressID) {
          proxy.$api.OrderBusniess.UpdateReceiveAddress(pup.form)
            .then((res: any) => {
              proxy.$message('保存成功');
              pup.state = false
              getAddresss()
            }).catch(() => {
              pup.loading = false
            })
        } else {
          proxy.$api.OrderBusniess.AddReceiveAddress({
            ...pup.form,
            customerCode: props.data?.customerCode,
          })
            .then((res: any) => {
              proxy.$message('保存成功');
              pup.state = false
              getAddresss()
            }).catch(() => {
              pup.loading = false
            })
        }


      }
    }
  ]
});
const getAddresss = () => {
  const _table = pup.table
  const _search = _table.search
  _table.loading = true
  proxy.$api.OrderBusniess.GetMatchCustomerReceiveAddresss({
    customerCode: props.data.customerCode,
  })
    .then((res: any) => {
      console.log(_search);
      _table.tbody = res.filter((el: any) => el.contactPersonName.includes(_search.contactPersonName) && el.contactTelephone.includes(_search.contactTelephone) && el.detailedAddress.includes(_search.detailedAddress))
      _table.loading = false
      if (!!!props.data.receiverName) {
        if (res.length > 0) {
          selectBtn(res)
        } else {
          pupAdd.state = true
        }
      }
    })
    .catch(() => {
      _table.loading = false
    });
}
const selectBtn = (arr: any) => {
  const _rowIndex = arr.findIndex((el: any) => el.isDefaultReceive === 1)
  const _row = arr[_rowIndex !== -1 ? _rowIndex : 0] || {}
  const _form = props.data
  _form.receiveAddressCode = _row.receiveAddressCode//地址code
  _form.receiveCompanyName = _row.companyName//公司名称
  _form.receiverName = _row.contactPersonName//姓名
  _form.receiveTelephone = _row.contactTelephone//电话
  _form.receiveProvinceCode = _row.province//省编码
  _form.receiveCityCode = _row.city//市编码
  _form.receiveAreaCode = _row.country//区编码
  _form.receiveAddress = _row.detailedAddress//详细地址
}
onMounted(() => {
  getAddresss()
});
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
